<script lang="ts" setup>
import NewsLive from "@/components/NewsLive/index.vue";
import useImpCpts from "./hooks/useImpCpts";
import useAppTabs, { useAppTabsRefs } from "./hooks/useAppTabs";
import { useFetchStatsRefs } from "./hooks/useFetchStats";
const { tabConfig } = useAppTabs();
const { curAppCpt, tabsOptions } = useAppTabsRefs();
const { resData } = useFetchStatsRefs();
const { cpts } = useImpCpts();
function handleChangeTab(name: string | number, title: string) {
  // console.log(1111, name, 2222, title);
}
</script>

<template>
  <div>
    <van-tabs
      v-model:active="curAppCpt"
      v-bind="{ ...tabConfig }"
      class="tabs-container"
      @change="handleChangeTab"
    >
      <van-tab
        v-for="({ title, name }, idx) in tabsOptions"
        :title="title"
        :key="idx"
        :name="name"
      >
        <div v-if="name === curAppCpt">
          <component :is="cpts[curAppCpt]" :resData="resData"></component>
        </div>
      </van-tab>
    </van-tabs>
    <div class="pt-8 pb-16 px-14">
      <NewsLive />
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.van-tabs.tabs-container) {
  & > .van-tabs__wrap {
    border-radius: 15px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.07);
    margin: 0 auto;
    width: 362px;
    border: 1px solid #f7f7f7;

    .van-tabs__nav {
      padding-left: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      .van-tabs__nav--line {
        padding-bottom: 0px;
      }
      .van-tab {
        padding: 0;
        .van-tab__text {
          width: 100%;
          height: 100%;
          font-weight: bold;
          font-size: 14px;
          color: #acacac;
          line-height: 16px;
          border-radius: 15px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        &.van-tab--active {
          pointer-events: none;
          .van-tab__text {
            background-color: #ffd931;
            color: #004d8e;
          }
        }
      }
    }
  }
  & > .van-tabs__content {
    margin-top: 18px;
    /* width: 362px; */
    margin-left: auto;
    margin-right: auto;
  }
}
</style>
